<template>
<view class="login-container">
  <!-- 顶部标题区域 -->
  <view class="login-header">
    <view class="login-goback">欢迎回来</view>
    <view class="login-subtitle">未注册用户将自动为您创建用户</view>
  </view>
  <!-- 内容区域 -->
  <view class="login-content">
    <view class="login-img">
      <image src="../../static/logo.png" alt="登录logo" />
    </view>
    <view class="login-btn">
      <button type="warn" @click="handleLogin">微信一键登录</button>
    </view>
  </view>
  
  <!-- 底部协议区域 -->
  <view class="button-box">
    <label class="radio">
      <radio class="login-radio" value="r1" :checked="agree" @click="select" />
    </label>
    <text class="read">已阅读并同意</text>
    <text class="protocol" @click="handleToAgreement">《用户许可使用协议》</text>
  </view>
</view>
</template>

<script setup>
import { ref } from 'vue'

// 状态管理
const agree = ref(false)

// 方法
const select = () => {
  agree.value = !agree.value
}

const handleToAgreement = () => {
  console.log('跳转到用户协议页面')
}

function handleLogin () {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>


<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 180rpx 60rpx 30rpx 60rpx;
  box-sizing: border-box;
}

.login-goback {
  font-size: 60rpx;
  color: red;
}

.login-subtitle {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.login-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 靠上 */
  align-items: center;
  min-height: 400rpx;
  margin-top: 200rpx;
}

.login-img {
  text-align: center;
  padding-bottom: 60rpx;
}

.login-img image {
  width: 250rpx;
  height: 250rpx;
}

.login-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.login-btn button {
  width: 90%;
  text-align: center;
  height: 90rpx;
  border-radius: 60rpx;
}

.button-box {
  font-size: 30rpx;
  color: #666;
  margin-top: 0rpx;
}

.protocol {
  color: red;
  margin-left: 4rpx;
}

radio .wx-radio-input.wx-radio-input-checked {
  background-color: red !important;
  border-color: red !important;
  color: red !important;
  transform: scale(0.7);
}

radio .wx-radio-input {
  transform: scale(0.7);
}
</style>